<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>管理员页面</title>
    <th:block th:replace="~{/backstage/common_resources::common_css}"/>
    <th:block th:replace="~{/backstage/common_resources::common_js}"/>
</head>

<!-- 第二个设置颜色-->
<body class="hold-transition skin-black-light sidebar-mini">
<!--    头部-->
    <header th:replace="~{/backstage/common_header::header}"></header>
<!--边栏-->
    <aside th:replace="~{/backstage/common_aside::aside}"></aside>

<!-- 内容区域 -->
<!-- @@master = admin-layout.html-->
<!-- @@block = content -->

<div class="content-wrapper">

    <!-- 内容头部 -->
    <section class="content-header">
        <h1>
            管理员管理
            <small>管理员列表</small>
        </h1>
        <ol class="breadcrumb">
            <li><a th:href="@{/backstage/index}"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a th:href="@{/backstage/admin/all}">管理员管理</a></li>
            <li class="active">管理员列表</li>
        </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <section class="content">

        <!-- .box-body -->
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">管理员列表</h3>
            </div>

            <div class="box-body">

                <!-- 数据表格 -->
                <div class="table-box">

                    <!--工具栏-->
                    <div class="pull-left">
                        <div class="form-group form-inline">
                            <div class="btn-group">
                                <!--模态窗口按键-->
                                <div class="tab-pane" id="tab-model">
                                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" title="新建">
                                        <i class="fa fa-file-o"></i> 新建
                                    </button>
                                </div>
                                <!--模态窗口按键/-->

                            </div>
                        </div>
                    </div>
                    <!--工具栏/-->

                    <!--模态窗口内容-->
                    <div id="myModal2" class="modal modal-primary" role="dialog">

                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">修改管理员</h4>
                                </div>
                                <div class="modal-body">


                                    <div class="box-body">
                                        <div class="form-horizontal">
                                            <form id="addAdmin2"  method="post">
                                                <!--管理员aid-->
                                                <div class="form-group">
                                                    <label for="username" class="col-sm-2 control-label">ID(不可修改):</label>
                                                    <div class="col-sm-5">
                                                        <div class="input-group">
                                                            <input id="aid" readonly type="text" class="form-control"  name="aid">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="username" class="col-sm-2 control-label">管理员名称:</label>
                                                    <div class="col-sm-5">
                                                        <div class="input-group">

                                                            <input id="username"  type="text" class="form-control" placeholder="管理员名称" name="username">

                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="password" class="col-sm-2 control-label">密码:</label>
                                                    <div class="col-sm-5">
                                                        <div class="input-group">
                                                            <input id="password" type="password" class="form-control" placeholder="密码" name="password">
                                                        </div>
                                                    </div>
                                                </div>


                                                <div class="form-group">
                                                    <label for="email" class="col-sm-2 control-label">邮箱:</label>
                                                    <div class="col-sm-5">
                                                        <div class="input-group">

                                                            <input id="email" type="text" class="form-control" placeholder="邮箱" name="email">

                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="phoneNum" class="col-sm-2 control-label">电话号码:</label>
                                                    <div class="col-sm-5">
                                                        <div class="input-group">
                                                            <input id="phoneNum" type="text" class="form-control" placeholder="电话号码" name="phoneNum">

                                                        </div>
                                                    </div>
                                                </div>



                                                <div class="form-group">
                                                    <label for="form-control" class="col-sm-2 control-label">状态:</label>
                                                    <div class="col-sm-5">
                                                        <select id="form-control" class="form-control" name="status">
                                                            <option value="true">开启</option>
                                                            <option value="false">关闭</option>
                                                        </select>
                                                    </div>
                                                </div>

                                            </form>

                                        </div>
                                    </div>



                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button>
                                    <button type="submit" id="save2" class="btn btn-outline" data-dismiss="modal">保存</button>
                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>

                        <!-- /.modal-dialog -->
                    </div>
                    <div id="myModal" class="modal modal-primary" role="dialog">

                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">新建管理员</h4>
                                </div>
                                <div class="modal-body">


                                    <div class="box-body">
                                        <div class="form-horizontal">
                                            <form id="addAdmin" method="post">
                                                <div class="form-group">
                                                    <label for="username" class="col-sm-2 control-label">管理员名称:</label>
                                                    <div class="col-sm-5">
                                                        <div class="input-group">

                                                            <input type="text" class="form-control" placeholder="管理员名称" name="username">

                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="password" class="col-sm-2 control-label">密码:</label>
                                                    <div class="col-sm-5">
                                                        <div class="input-group">
                                                            <input type="password" class="form-control" placeholder="密码" name="password">
                                                        </div>
                                                    </div>
                                                </div>


                                                <div class="form-group">
                                                    <label for="email" class="col-sm-2 control-label">邮箱:</label>
                                                    <div class="col-sm-5">
                                                        <div class="input-group">

                                                            <input type="text" class="form-control" placeholder="邮箱" name="email">

                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="phoneNum" class="col-sm-2 control-label">电话号码:</label>
                                                    <div class="col-sm-5">
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" placeholder="电话号码" name="phoneNum">

                                                        </div>
                                                    </div>
                                                </div>



                                                <div class="form-group">
                                                    <label for="form-control" class="col-sm-2 control-label">状态:</label>
                                                    <div class="col-sm-5">
                                                        <select class="form-control" name="status">
                                                            <option value="true">开启</option>
                                                            <option value="false">关闭</option>
                                                        </select>
                                                    </div>
                                                </div>

                                            </form>

                                        </div>
                                    </div>



                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button>
                                    <button type="submit" id="save" class="btn btn-outline" data-dismiss="modal">保存</button>
                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>

                        <!-- /.modal-dialog -->
                    </div>
                    <!--模态窗口内容/-->

                    <!--数据列表-->
                    <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                        <thead>
                        <tr>
                            <th class="" style="padding-right:0px;">
                                <input id="selall" type="checkbox" class="icheckbox_square-blue">
                            </th>
                            <th>用户名</th>
                            <th>邮箱</th>
                            <th>联系电话</th>
                            <th>状态</th>
                            <th class="text-center">操作</th>
                        </tr>
                        <tbody>
                        <!--adminPage.records返回当前页数据返回值
                        </thead>是list-->
                        <tr th:each="admin:${adminPage.records}">
                            <td><input name="ids" type="checkbox"></td>
                            <td th:text="${admin.username}"></td>
                            <td th:text="${admin.email}"></td>
                            <td th:text="${admin.phoneNum}"></td>
                            <td class="text-aqua" th:text="${admin.status}"></td>
                            <td class="text-center">


                                <a class="btn bg-aqua btn-xs" th:href="@{/backstage/admin/desc(aid=${admin.aid})}">详情</a>

                                <form class="btn btn-xs" th:id="${admin.aid}">
                                    <input name="aid" th:value="${admin.aid}" hidden>
                                    <a  class="btn bg-olive btn-xs" data-toggle="modal" data-target="#myModal2">编辑</a>
                                </form>

                                <a th:href="@{/backstage/admin/updateStatus(aid=${admin.aid})}" class="btn bg-gray btn-xs">开启/禁用</a>
                                <a class="btn bg-blue btn-xs" th:href="@{/backstage/admin/findRole(aid=${admin.aid})}">分配角色</a>
                            </td>
                        </tr>

                        </tr>

                        </tbody>

                    </table>
                    <!--数据列表/-->


                </div>
                <!-- 数据表格 /-->


            </div>
            <!-- /.box-body -->

            <!-- .box-footer-->
            <div class="box-footer">
                <div class="pull-left">
                    <div class="form-group form-inline">
                        总共<span th:text="${adminPage.pages}"></span> 页，
                        共<span th:text="${adminPage.total}"></span> 条数据。
                    </div>
                </div>

                <div class="box-tools pull-right">
                    <ul class="pagination">

                    </ul>
                </div>

            </div>
            <!-- /.box-footer-->



        </div>

    </section>
    <!-- 正文区域 /-->

</div>
<!-- @@close -->
<!-- 内容区域 /-->


<!--底部-->
<footer th:replace="~{/backstage/common_footer::footer}"></footer>

<script th:inline="javascript">

    <!--  新增管理员 ajax请求  -->
    $(function (){
        $("#save").click(function(){

            $("#addAdmin").ajaxSubmit({

                url:"/backstage/admin/add",
                type: "post",
                success:function (result){
                    window.location.reload();//刷新窗口
                }
            })
        })
    });

    <!--  修改管理员 ajax请求  -->
    $(function (){
        $("#save2").click(function(){

            $("#addAdmin2").ajaxSubmit({

                url:"/backstage/admin/update",
                type: "post",
                success:function (result){
                    window.location.reload();//刷新窗口

                }
            })
        })
    });

    //遍历 tr标签下的所有form元素
    $("tr form").map(function(index,ele){
        var idName=$(ele).attr("id");//获取form元素的id值（修改按钮的form）
        $("#"+idName+" a").click(function(){

            //ajax请求将选中的管理员的aid传入后端
            $("#"+idName).ajaxSubmit({

                url:"/backstage/admin/edit",
                type: "post",
                success:function (admin){
                    //将ajax请求回调的数据显示到页面上
                    $("#username").prop("value",admin['username']);
                    $("#email").prop("value",admin['email']);
                    $("#password").prop("value",admin['password']);
                    $("#phoneNum").prop("value",admin['phoneNum']);
                    $("#aid").prop("value",admin['aid']);
                    if (admin['status']){
                        $('#form-control').get(0).selectedIndex=0;
                    }else {
                        $('#form-control').get(0).selectedIndex=1;
                    }

                }
            })
        })
    })

    //分页
    var currentPage =[[${adminPage.current}]]
    var pages =[[${adminPage.pages}]]
    var context =[[${#servletContext.contextPath}]]//获取项目路径
    // 分页插件
    $('.pagination').bootstrapPaginator({
        bootstrapMajorVersion: 3, // bootstrap版本
        currentPage: currentPage, // 当前页
        totalPages: pages, // 总页数
        numberOfPages: 5, // 最多显示多少页
        itemTexts: function (type, page, current) {
            switch (type) {
                case "first":
                    return "首页";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "末页";
                case "page":
                    return page;
            }
        },
        onPageClicked: function (event, originalEvent, type, page) { // 点击页码执行的方法

            location.href = context+"/backstage/admin/all?page=" + page;
        }

    })
</script>

</body>

</html>